<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <cw:base/>
  </head>
  <body>
  <body>
	<ul>
		<li>
			<b>表格的工具栏提供了表格的操作。常见的工具栏有分页栏，编辑栏，导出栏，而且支持自定义按钮。</b>
		</li>
		<li>
			<b>表格构件定义了分页则自动产生分页栏，定义了导出则自动产生导出栏。编辑工具栏需要在toolbar标签中定义，自定义按钮也然。</b>
		</li>
		<li>
			<b>toolbar标签中定义的actionButton标签来渲染工具栏按钮。actionButton的type属性为操作类型，可选值['','add','delete','remove','update','copy']，其中'add','delete','remove','update'为编辑工具栏按钮，在可编辑表格详细描述。
			action属性为自定义处理Javascript函数。</b>
		</li>
		<li>
			<b>表格构件的toolbarPos属性(可选值['','top','bottom'])定义表格工具栏在表格中的位置。默认自定义工具栏在顶部，分页栏和导出栏在底部，设置的话则所有工具栏位置都在顶部或底部。</b>
		</li>
	</ul>
	<br/>
	<br/>
	<ul>
  		<li>
  			分页表格，包含自定义工具栏
				<cw:grid id="grid1" title="表格工具栏"
					url="../../../../sample/grid/grid.query.action"
					enablePage="true" exportable="false" selectMode="checkbox"
					urlParams="{id:0}"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
			  		<cw:toolBar>
			  			<cw:actionButton type="" action="alert('总记录:'+Ext.getCmp('grid1').getStore().getTotalCount());" title="记录总数"/>
			  		</cw:toolBar>
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
		<li>
			分页表格，包含自定义工具栏，设置toolbarPos为top
				<cw:grid id="grid2" title="表格工具栏"
					url="../../../../sample/grid/gridpage.query.action"
					enablePage="true" exportable="false" selectMode="checkbox"
					urlParams="{id:0}" toolbarPos="top"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
			  		<cw:toolBar>
			  			<cw:actionButton type="" action="alert('总记录:'+Ext.getCmp('grid2').getStore().getTotalCount());" title="记录总数"/>
			  		</cw:toolBar>
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
		<li>
			分页表格，包含自定义工具栏，设置toolbarPos为bottom
				<cw:grid id="grid3" title="表格工具栏"
					url="../../../../sample/grid/gridpage.query.action"
					enablePage="true" exportable="false" selectMode="checkbox"
					urlParams="{id:0}" toolbarPos="bottom"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
			  		<cw:toolBar>
			  			<cw:actionButton type="" action="alert('总记录:'+Ext.getCmp('grid3').getStore().getTotalCount());" title="记录总数"/>
			  		</cw:toolBar>
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
	</ul>
  </body>
  <cw:theme></cw:theme>
 </html>